<!-- page specific plugin styles -->
<link rel="stylesheet" href="styles/money/yingshouyingfu.css">

<!-- begin 应收应付 -->
<div id="topbox">
	<ul>
		<li id="one">系统通知：</li>
		<li id="two">在这里您可以所有的应收应付账单。</li>
		<li id="there">不再提醒</li>
	</ul>
</div>
<div id="box">
	<div id="top">
		<span id="ipt" class="input-icon input-icon-right">
			<input type="text" placeholder="输入单据号/应付/应付款项人" />
			<i class="ace-icon fa fa-search"></i>
		</span>
		<div id="right">
			<img id="tu" src="images/money/tubiao3.png"/>
			<input id="btn" type="button"/>
		</div>
	</div>
	<div id="aaa">
		<ul>
			<li>
				<a href="#">类型：</a>
				<a href="#">全部</a>
				<a href="#">应收帐单</a>
				<a href="#">应付账单</a>
			</li>
			<li>
				<a href="#">款项：</a>
				<a href="#">全部</a>
				<a href="#">已结清&nbsp;&nbsp;&nbsp;&nbsp;</a>
				<a href="#">未结清</a>
				<a href="#">剩余金额</a>
				<input id="iptone" type="text" placeholder="最小金额"/>
				一
				<input id="ipttwo" type="text" placeholder="最大金额"/>
			</li>
			<li id="bbb">
				<a href="#">时间：</a>
				<a href="#">全部</a>
				<p class="p1"><input class="form-control date-picker" type="text" data-date-format="dd-mm-yyyy" value="2017年01月03日"></p>
				<p>—</p>
				<p><input class="form-control date-picker" type="text" data-date-format="dd-mm-yyyy" value="年/月/日"></p>
				<span id="spans">收起</span>
			</li>
		</ul>
	</div>
	<div id="main">
		<p>当前应收账单<span>8808笔</span>，合计<span>8888.88</span>元，当前应付帐单<span>1088</span>笔，合计<span>8888.88元</span>
			<input id="anniu" type="button" />
		</p>
	</div>
	<div id="onea">
		<table id="simple-table" class="table  table-bordered table-hover">
			<thead>
				<tr>
					<th class="center">
						<label class="pos-rel">
							<input type="checkbox" class="ace">
							<span class="lbl"></span>
						</label>
					</th>
					<th class="ico">
						<i class="ace-icon glyphicon glyphicon-trash" style="color: #feffff;"></i>
					</th>
					<th>单据号</th>
					<th>创建时间</th>
					<th>账单类型</th>
					<th>应付/应收款项人</th>
					<th>经办人</th>
					<th>账单剩余金额</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="tr">
					<td class="center">
						<label class="pos-rel">
							<input type="checkbox" class="ace">
							<span class="lbl"></span>
						</label>
					</td>
					<td>
						<!--<i class="ace-icon glyphicon glyphicon-trash" style="color: #feffff;"></i> -->
					</td>
					<td>F-201611229999</td>
					<td>2011-11-11 22：00：00</td>
					<td>应收账单</td>
					<td>会员名称明明</td>
					<td>店员名称</td>
					<td style="color: #169b0a;">8888.88</td>
					<td>未结清</td>
					<td><i class="ace-icon fa fa-pencil-square-o"></i></td>
				</tr>
				<tr class="trtow">
					<td class="center">
						<label class="pos-rel">
							<input type="checkbox" class="ace">
							<span class="lbl"></span>
						</label>
					</td>
					<td><i class="ace-icon glyphicon glyphicon-trash" style="color: #5ac6ec;"></i>
					</td>
					<td>F-201611229999</td>
					<td>2011-11-11 22：00：00</td>
					<td>应收账单</td>
					<td>会员名称明明</td>
					<td>店员名称</td>
					<td style="color: #ff8e2b;">8888.88</td>
					<td>已结清</td>
					<td><i class="ace-icon fa fa-pencil-square-o" style="color: #5ac6ec;"></i></td>
				</tr>
				<tr class="tr">
					<td class="center">
						<label class="pos-rel">
							<input type="checkbox" class="ace">
							<span class="lbl"></span>
						</label>
					</td>
					<td>
						<!--<i class="ace-icon glyphicon glyphicon-trash" style="color: #feffff;"></i> -->
					</td>
					<td>F-201611229999</td>
					<td>2011-11-11 22：00：00</td>
					<td>应收账单</td>
					<td>会员名称明明</td>
					<td>店员名称</td>
					<td style="color: #169b0a;">8888.88</td>
					<td>未结清</td>
					<td><i class="ace-icon fa fa-pencil-square-o"></i></td>
				</tr>
				<tr class="tr">
					<td class="center">
						<label class="pos-rel">
							<input type="checkbox" class="ace">
							<span class="lbl"></span>
						</label>
					</td>
					<td>
						<!--<i class="ace-icon glyphicon glyphicon-trash" style="color: #feffff;"></i> -->
					</td>
					<td>F-201611229999</td>
					<td>2011-11-11 22：00：00</td>
					<td>应收账单</td>
					<td>会员名称明明</td>
					<td>店员名称</td>
					<td style="color: #169b0a;">8888.88</td>
					<td>未结清</td>
					<td><i class="ace-icon fa fa-pencil-square-o"></i></td>
				</tr>
				<tr class="tr">
					<td class="center">
						<label class="pos-rel">
							<input type="checkbox" class="ace">
							<span class="lbl"></span>
						</label>
					</td>
					<td>
						<!--<i class="ace-icon glyphicon glyphicon-trash" style="color: #feffff;"></i> -->
					</td>
					<td>F-201611229999</td>
					<td>2011-11-11 22：00：00</td>
					<td>应收账单</td>
					<td>会员名称明明</td>
					<td>店员名称</td>
					<td style="color: #169b0a;">8888.88</td>
					<td>未结清</td>
					<td><i class="ace-icon fa fa-pencil-square-o"></i></td>
				</tr>
			</tbody>
		</table>
		<div id="liangge">
			<p>
				<span>共三页，每页显示</span>
				<select>
					<option>10</option>
					<option>20</option>
					<option>50</option>
				</select>条
			</p>
			<div id="fanye">
				<ul class="pagination pull-right no-margin wanggy">
					<li class="prev disabled"><a href="#"><i class="ace-icon fa fa-angle-left"></i></a></li>
					<li class="active"><a href="#" class="active-bg">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">...</a></li>
					<li><a href="#">10</a></li>
					<li class="next"><a href="#"><i class="ace-icon fa fa-angle-right"></i></a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- end -->

<!-- inline scripts related to this page -->
<script type="text/javascript">
	jQuery(function($) {

		var btnone = $("#btn"),
			conterS = $("#aaa"),
			spanS = $("#spans");

		btnone.on("click", function(){
			conterS.slideDown();
		});
		spanS.on("click", function(){
			conterS.slideUp();
		});
	})
</script>